<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset='utf-8' />
    <title>M3D-地下管线数据展示</title>
    <!--引用第三方的jQuery脚本库-->
    <script include="jquery" src="./static/libs/include-lib-local.js"></script>
    <!--引用Cesium脚本库文件-->
    <script src="./static/libs/include-cesium-local.js"></script>
    <!--引用示例页面样式表-->
    <link rel="stylesheet" href="./static/demo/cesium/style.css" />
    <script>
        //在JS脚本开发中使用严格代码规范模式，及时捕获一些不规范的行为，从而避免编程错误
        'use strict';

        //定义三维场景控件对象
        var webGlobe;
        //定义M3D图层对象
        var underpipeLayerArr;

        //加载三维场景
        function init() {
            //构造三维视图对象（视图容器div的id，三维视图设置参数）
            webGlobe = new Cesium.WebSceneControl('GlobeView', {});

            //开启地形深度检测
            webGlobe.viewer.scene.globe.depthTestAgainstTerrain = true;
            //设置球体初始透明度
            webGlobe.viewer.scene.globe.transparent = 50 / 100;
            //开启地下模式
            webGlobe.viewer.scene.globe.undergroundMode = true;

            //构造视图功能管理对象（视图）
            var sceneManager = new CesiumZondy.Manager.SceneManager({
                viewer: webGlobe.viewer
            });
            //设置鼠标位置信息展示控件：经纬度、高程、视角高度（容器div的id）
            sceneManager.showPosition('coordinate_location');

            //构造M3D模型层管理对象（视图）
            var m3dLayer = new CesiumZondy.Layer.M3DLayer({
                viewer: webGlobe.viewer
            });
            //加载M3D地图文档（服务地址，配置参数）
            var {
                protocol,
                ip,
                port
            } = window.webclient;
            underpipeLayerArr = m3dLayer.append(`${protocol}://${ip}:${port}/igs/rest/g3d/UnderPipe`, {});

            //构造第三方图层对象
            var thirdPartyLayer = new CesiumZondy.Layer.ThirdPartyLayer({
                viewer: webGlobe.viewer
            });
            //加载OSM地图
            var osm = thirdPartyLayer.appendOsmMap();

            //视点跳转（经度，纬度，视角高度，方位角，俯仰角，翻滚角）
            sceneManager.flyToEx(108.95818720644677, 34.21849146233197, {
                height: 10,
                heading: 33,
                pitch: -20,
                roll: 0
            });
        }

        function change() {
            //获取拖动条值
            var transparent = document.getElementById("trans").value;
            //修改场景球透明度
            webGlobe.viewer.scene.globe.transparent = transparent / 100;
        }
    </script>
</head>

<body onload="init()">
    <!-- 三维场景容器 -->
    <div id='GlobeView'>
        <div class="message">
            <!-- 拖动条 -->
            透明度：<input id="trans" type="range" min="0" max="100" step="1" value="50" onmousemove="change()">
        </div>
    </div>
    <!--位置信息容器-->
    <div id="coordinateDiv" class="coordinateClass">
        <label id="coordinate_location"></label>
    </div>
</body>

</html>